<template>
  <div class="digit-report" v-loading="loading">
    <report-form ref="reportFormRef"></report-form>
    <el-form label-width="200px" :model="formData" :rules="rules" size="medium"
      style="margin-top: 40px;">
      <el-form-item label="浙江数商申报书盖章后上传" prop="stampedFile">
        <el-upload :action="uploadAction" :before-upload="(file) => beforeUpload(file)"
          :file-list="stampedFileFileList" :headers="uploadHeaders"
          :on-success="(res, file) => onUploadSuccess(res, file, 'stampedFile', 'formData')"
          :on-preview="onPreview"
          :on-remove="(file, fileList) => onRemove(file, fileList, 'stampedFile', 'formData')">
          <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
        <export-form ref="exportFormRef" :form-component="exportReportComponent" file-name="浙江数商申报书"
          style="margin-left: 20px;" @on-opened="onOpenedBeforeExport" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { downloadFile } from "@/utils/index";

import { getAuthHeader } from '@/utils/auth';
import ExportForm from '../../bpm/processInstance/export-form.vue';
import ReportForm from './report-form.vue';

const headers = getAuthHeader();

export default {
  components: {
    ExportForm,
    ReportForm
  },
  data() {
    const self = this;
    return {
      formData: {
        stampedFile: null,
      },

      rules: {
        stampedFile: [{
          required: true,
          message: '请上传盖章文件',
          trigger: 'change'
        }],
      },
      uploadHeaders: {
        ...headers
      },
      uploadAction: '/admin-api/infra/file/upload',
      loading: false,
      stampedFileFileList: [],

      exportReportComponent: {
        name: 'report-form',
        path: '/custom-forms/digit-business-report/report-form',
        props: {
          defaultValue: {},
          disabled: true,
        }
      }
    };
  },
  methods: {
    async submitForm() {
      this.loading = true;
      const { processDefinitionId } = this.$route.query;
      await this.$refs.reportFormRef.submitForm(processDefinitionId, this.formData);
      this.$router.go(-1);
      this.loading = false;
    },
    resetForm() {
      this.$refs['reportFormRef'].resetForm();
    },
    beforeUpload(file, accept) {
      const isRightSize = file.size / 1024 / 1024 < 20;
      if (!isRightSize) {
        this.$message.error('文件大小超过 20MB');
      }
      let isAccept = true;
      if (accept) {
        isAccept = new RegExp(accept).test(file.type);
        if (!isAccept) {
          this.$message.error(`应该选择${accept}类型的文件`);
        }
      }
      return isRightSize && isAccept;
    },
    onUploadSuccess(res, file, fileField, formData) {
      this[fileField + 'FileList'] = this[fileField + 'FileList'].concat([{
        name: file.name,
        url: res.data
      }]);
      const prev = this[formData][fileField] || [];
      // 上传成功后的回调，图片路径存储起来
      this.$set(this[formData], fileField, [...prev, res.data]);
    },
    onPreview(file) {
      downloadFile(file);
    },
    onRemove(file, fileList, fileField, formData) {
      console.log(file, fileList, fileField, formData);
      this[fileField + 'FileList'] = fileList.map(f => ({ name: f.name, url: f.url }));
      this.$set(this[formData], fileField, fileList.map(f => f.url));
    },
    onOpenedBeforeExport() {
      const formData = this.$refs.reportFormRef.getFormData();
      // 填充当前值
      this.exportReportComponent.props.defaultValue = formData;
    }
  }
};

</script>
<style lang="scss">
.digit-report {
  padding: 20px;

  width: 80%;
  margin: 0 auto;
  max-width: 980px;
  font-size: 14px;
}
</style>
